<!-- index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/echarts.min.js"></script>
    <title>Index</title>
</head>
<body>
<div th:text="${test}"></div> <!-- 验证数据绑定 -->
<div class="container">
    <h2>全局统计</h2>
    <div class="chart" id="globalChart"></div>

    <h3>慢查询明细</h3>
    <div th:each="cls : ${classes}" class="query-card">
        <div class="fingerprint" th:text="${cls.fingerprint}"></div>
        <div class="metrics">
            <div>平均耗时：[[${#numbers.formatDecimal(cls.metrics['Query_time'].avg, 1, 2)}]]s</div>
            <div>最大行扫描：[[${cls.metrics['Rows_examined'].max}]]</div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    // ECharts初始化代码
    document.querySelectorAll('.chart').forEach(container => {
        const chart = echarts.init(container);
        const option = {
            xAxis: {type: 'category'},
            yAxis: {type: 'value'},
            series: [{
                type: 'bar',
                data: container.dataset.histogram.split(',').map(Number)
            }]
        };
        chart.setOption(option);
    });
</script>
</body>
</html>